<template>
  <Box title="滤芯状态监控" style="margin-top: 40px">
    <div class="collection">
      <div class="echart">
        <BaseEcharts :options="options"></BaseEcharts>
      </div>
      <div class="num">
        <div class="item">
          <span class="blue"></span> <span class="tit">正常</span
          ><span class="tit">{{ detail.normal.percent }}</span
          ><span class="tit">{{ detail.normal.num }}</span>
        </div>
        <div class="item">
          <span class="white"></span> <span class="tit">以到期</span
          ><span class="tit">{{ detail.expire.percent }}</span
          ><span class="tit">{{ detail.expire.num }}</span>
        </div>
      </div>
    </div>
  </Box>
</template>

<script setup lang="ts">
import Box from '@/components/Box.vue'
import { ref } from 'vue'
import { getChipStatistics } from '@/api'
import useInterval from '@/hooks/useInterval'
import config from '@/utils/config'
import BaseEcharts from '@/components/BaseEcharts.vue'
const detail: any = ref({ normal: {}, expire: {} })
let options: any = ref({})
useInterval(() => {
  getChipStatistics({}).then((res: any) => {
    detail.value = res
    options.value = {
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          // 颜色
          data: [
            { value: parseInt(res.normal.percent), name: '正常', itemStyle: { color: '#3aa0ff' } },
            { value: parseInt(res.expire.percent), name: '已过期', itemStyle: { color: '#d6d6d6' } }
          ]
        }
      ]
    }
  })
}, config.internalTime)
</script>

<style lang="scss" scoped>
.collection {
  margin-top: 10px;
  width: 100%;
  height: 194px;
  min-height: 194px;
  overflow: hidden;
  background-color: rgba(#142c55, 0.5);
  display: flex;
  .echart {
    width: 50%;
  }
  .num {
    display: flex;
    flex-direction: column;
    position: relative;
    // align-items: center;
    justify-content: center;
    left: -20px;

    color: #fff;
    .item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .blue {
        background-color: #3aa0ff;
        width: 24px;
        height: 12px;
        display: inline-block;
        border-radius: 2px;
        margin-right: 10px;
      }
      .white {
        background-color: #d6d6d6;
        width: 24px;
        height: 12px;
        display: inline-block;
        border-radius: 2px;
        margin-right: 10px;
      }
      .tit {
        display: inline-block;
        margin-right: 10px;
        min-width: 50px;
      }
    }
  }
}
</style>
